<template>
	<view class="container">
		<view class="title">
			天天赚积分
		</view>
		<view class="titles">
			邀请好友体验uniCloud分销商城
		</view>
		<view class="desc">
			好友注册uniCloud分销商城，你必得<text>99</text>积分
		</view>
		<view class="descs">
			好友购买商品，你获得<text>5%</text>的利润分配
		</view>
		<view class="tabBars">
			<view class="tabTitle">
				邀请记录
			</view>
			<view class="tabList">
				<view class="one">
					<view class="number">
						{{userInfo.pleaseCount}}
					</view>
					<view class="listTitle">
						邀请成功（人）
					</view>
				</view>
				<view class="two">
					<view class="number">
						{{userInfo.userIntegral}}
					</view>
					<view class="listTitle">
						获得奖励(积分)
					</view>
				</view>
			</view>
		</view>
		<button type="default" @click="copyH5andApp">去分享</button>
	</view>
</template>

<script>
	import api from '@/comon/api.js'
	export default {
		data(){
			return{
				userInfo:{
					pleaseCount: 0,
					userIntegral: 0
				}
			}
		},
		onLoad() {
			let userInfos = uni.getStorageSync('userInfos');
			this.userInfo = userInfos;
		},
		methods:{
			copyH5andApp() {
				let userInfo = uni.getStorageSync('userInfos');
				// #ifndef H5
				uni.setClipboardData({
					data: `https://static-53cba1e3-c107-4211-b470-8de9edc77079.bspapp.com/#/pages/public/login?invitecode=${userInfo._id}`,
					success() {
						uni.showToast({
							icon: 'success',
							title: '复制成功'
						})
					}
				});
				// #endif
				// #ifdef H5
				var aux = document.createElement("input");
				aux.setAttribute("value", `https://static-53cba1e3-c107-4211-b470-8de9edc77079.bspapp.com/#/pages/public/login?invitecode=${userInfo._id}`);
				document.body.appendChild(aux);
				aux.select();
				document.execCommand("copy");
				document.body.removeChild(aux);
				uni.showToast({
					icon: 'success',
					title: '复制成功'
				})
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	.container{
		background-image: linear-gradient(to bottom, #e81311, #e8c049);
		width: 100vw;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
	}
	.title{
		width: 100%;
		text-align: center;
		color: #550000;
		font-size: 70rpx;
		font-family: '楷体';
		font-weight: bold;
	}
	.titles{
		width: 100%;
		text-align: center;
		color: #550000;
		font-size: 35rpx;
		font-family: '楷体';
		font-weight: bold;
	}
	.desc,
	.descs{
		width: 100%;
		text-align: center;
		margin-top: 200rpx;
		color: #550000;
		font-size: 30rpx;
		font-family: '楷体';
		font-weight: bold;
		text{
			color: #c71563;
			font-size: 50rpx;
		}
	}
	.descs{
		margin-top: 0;
	}
	.tabBars{
		width: 92%;
		padding: 0 2% 2%;
		margin-left: 2%;
		background-color: #efe7eb;
		.tabTitle{
			width: 40%;
			background-color: #ffb2b2;
			text-align: center;
			color: $uni-back-color;
			margin-left: 30%;
			border-radius: 0 0 15rpx 15rpx;
			height: 65rpx;
			line-height: 65rpx;
			font-size: 38rpx;
			font-family: '楷体';
			font-weight: bold;
		}
		.tabList{
			display: flex;
			.one,
			.two,
			.three{
				width: 50%;
				.number,
				.listTitle{
					width: 100%;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					font-family: '楷体';
					font-size: 30rpx;
					font-weight: bold;
					color: $uni-back-color;
				}
				.listTitle{
					font-family: '楷体';
					font-size: 25rpx;
					font-weight: bold;
					color: #000000;
				}
			}
		}
	}
	button{
		background-image: linear-gradient(to right,#d80c3c,#2399d8);
		color: #fff;
		width: 40%;
		margin-top: 100rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		box-shadow: 0 0 25rpx 0 #8c2eba;
	}
</style>
